<script type="text/javascript">
$(document).ready(function(){
    $("#loginForm").validate({
    	rules: {
			username: { required: true },
			password: { required: true },
			phone:	  { required: true },
			address:  { required: true },
		},
		messages: {
			username: {
				required: "<label style=\"color: red;font-family: Tahoma;font-size: 12px;line-height: 12px;\">Please enter your username.</label>",
			},
			password: {
				required: "<label style=\"color: red;font-family: Tahoma;font-size: 12px;line-height: 12px;\">Please enter your password.</label>",				
			},
			phone: {
				required: "<label style=\"color: red;font-family: Tahoma;font-size: 12px;line-height: 12px;\">Please enter your phone.</label>",				
			},
			address: {
				required: "<label style=\"color: red;font-family: Tahoma;font-size: 12px;line-height: 12px;\">Please enter your address.</label>",				
			}
		},
    });
  });
</script>
<script type="text/javascript">
    $(document).ready(function(){
     $(".tdQuantity").change(function(){
	  	$(".tdCost").html(parseFloat($(".tdPrice").html()*$(".tdQuantity").val()).toFixed(2));					    
		$("input#quantity").val($(".tdQuantity").val());
		$("input#cost").val(parseFloat($(".tdPrice").html()*$(".tdQuantity").val()).toFixed(2));
		});
	});
</script>	
<form method="POST" name="loginForm" id="loginForm" action="">
<input type="hidden" name="bid" id="bid" value="{bid}" />
<input type="hidden" name="quantity" id="quantity" value="1" />
<input type="hidden" name="cost" id="cost" value="{price}" />
<div id="bookDeal"> 
    <p>Book deal</p>
    <br/>
    <hr />
    <table id="tblDeal">
    	<tr>
    		<th class="thProduct">Product</th>
    		<th class="thPrice">Price</th>
    		<th class="thQuantity">Quantity</th>
    		<th class="thCost">Cost</th>
    	</tr>
    	<tr>
    		<td class="tdProduct">{bookName}</td>
    		<td class="tdPrice">{price}</td>
    		<td >
    			<select class="tdQuantity" name="quantity" >
    				<option value="1">1</option>
    				<option value="2">2</option>
    				<option value="3">3</option>
    				<option value="4">4</option>
    				<option value="5">5</option>
    				<option value="6">6</option>
    				<option value="7">7</option>
    				<option value="8">8</option>
    				<option value="9">9</option>
    				<option value="10">10</option>
    				
    			</select>
    		</td>
    		<td class="tdCost">{price}</td>
    	</tr>
    </table>
</div>
  

